<template>
  <div class="center">
    <p>欢迎光临_vue开发的收银系统_水果店</p>
    <h5>苹果10￥/斤，折扣 8折</h5>
    <h5>请输入你要购买的斤数<input type="text" v-model="num"></h5>
    <button @click="btn">结账买单</button>
    <h5>结账单:总价：{{all}}￥元 折后价：{{end}}￥元 省了：{{sell}}￥元</h5>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      all: 0,
      end:0,
      sell: 0,
    };
  },
  methods: {
    btn() {
      this.all = this.num * 10;
      this.sell = (10*this.num)-(this.num*8);
      this.end = this.all - this.sell
      this.num = 0 ;
    },
  },
};
</script>

<style scoped>
.center {
  width: 350px;
  height: 300px;
  margin: 100px auto;
}
</style>
